<template>
	<view>
		<!-- pages/index/index.wxml -->
		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData" navbarBg="#ffffff"></navber>
		<!-- 顶部地址 -->
		<!-- <view class="addr-list">
  <view class="addr-left">
    <view class="addr-icon">
      <image src="{{imgUrl}}/imgs/address.png"></image>
    </view>
    <view class="addr-text">三盛宏业大厦附近</view>
  </view>
  <view class="addr-right">
  </view>
</view> -->
		<!-- 搜索框 -->
		<view class="search">
			<view class="service">
				<button class="no-button" open-type="contact">
					<view class="orderSubmit-item-img">
						<image :src="imgUrl + '/imgs/goods/serve.png'"></image>
					</view>
					<view class="text">客服</view>
				</button>
			</view>
			<view class="search-layer">
				<view class="search-input">
					<input placeholder="输入您感兴趣的商品" @tap="confirm_keyword" />
				</view>
				<view class="search-confirm" @tap="confirm_keyword">
					<image :src="imgUrl + '/imgs/search.png'"></image>
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="banner-bg">
			<view class="banner">
				<swiper :indicator-dots="true" :current="nowIndex" indicator-color="rgba(0,0,0,0.5)" :circular="true"
					indicator-active-color="rgba(255,255,255,1.00)" class="banner-swiper imageContainer"
					@change="handleChange" previous-margin="8px" next-margin="8px">
					<swiper-item
						:class="'swiper-item ' + (currentIndex > index ? 'item-img-left' : currentIndex < index ? 'item-img-right' : '')"
						@tap="onBannerClick($event, { index, id: item.id })" :data-index="index" :data-id="item.id"
						v-for="(item, index) in banner" :key="index">
						<image mode="aspectFill" :src="item.banner_src"
							:class="'banner-img ' + (currentIndex == index ? 'active' : '')"></image>
						<view class="banner-img"></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分类导航 -->
		<view class="goods-type">
			<view class="goods-type-item" @tap="onItemClick" :data-type="item.id" :data-name="item.name"
				:data-url="item.url" v-for="(item, index) in labelList" :key="index">
				<view class="goods-type-img">
					<image mode="widthFix" :src="item.icon"></image>
				</view>
				<view class="goods-type-text">{{ item.name }}</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-plate">
			<goodsroll :navItem="item" v-for="(item, index) in navItem" :key="index"></goodsroll>
		</view>
		<!-- 商品列表 -->
		<view class="goods-plate">
			<view class="all-goods">
			        <view class="all-text">全部商品</view>
			    </view>
			 <goods :isEnd="goodsEnd" :goodsList="dataList"></goods>
		</view>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';
	import goods from '@/components/goods/index';
	import goodsroll from '@/components/goodsroll/index';
	import goodsindex from '@/components/goodsindex/index';

	// pages/index/index.js
	const app = getApp();

	const Api = require('../../api/index.js');

	const Config = require('../../config/index.js');

	const MapSdk = require('../../utils/libs/wx-qqmap-jssdk.js');

	const Map = new MapSdk({
		key: Config.qqmapKey
	});
	export default {
		components: {
			navber,
			goods,
			goodsroll,
			goodsindex,

		},
		data() {
			return {
				navbarData: {
					title: app.globalData.title //顶部标题
					// is_show_bottom: true, //显示背景图
					// bac_img: '/assets/imgs/navbar/navbar_bg_all', //显示背景图片
				},
				//导航栏
				imgUrl: Config.imgUrl,
				//图片url
				loca_address: {
					nation: '',
					//国
					province: '',
					//省
					city: '',
					//市
					district: '',
					//区
					street: '',
					//街道
					street_number: '' //门牌
				},

				//定位地址
				location: {
					lat: '',
					lng: ''
				},

				selects_goods: 'synthesis',

				//商品排序方式
				banner: [],
				//banner
				selects: '0',
				//标签选中值id
				imgUrl: Config.imgUrl,
				//图片url
				scrollHeight: 0,
				//滚动距离
				dataList: [],
				//列表数据
				pagenow: 1,
				isMember: false,
				//是否会员
				isIphonex: app.globalData.isIphoneX,
				stickyTop: app.globalData.stickyTop,
				goodsNavH: 0,

				//切换导航栏高度
				navTop: 205,
				goodsEnd: 'start',
				labelList: [],
				currentIndex: 0,
				nowIndex: 0,
				navItem: [],
				business: 4,
				service: '',
				catList: ''
			};
		},
		onReachBottom: function(e) {
			//滚动底部
			this.getDataList();
		},
		onPageScroll: function(h) {
			// if(h.scrollTop>200){
			//   wx.hideTabBar();
			// }else{
			//   wx.showTabBar();
			// }
			// 滚动距离
			this.setData({
				scrollHeight: h.scrollTop
			});
		},
		onReady() {
			// this.get_height();
			// this.pess();
		},
		
		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad() {
			this.getBanner();
		},
		onShow: function() {
			let that = this;
			Api.userCore({
				type: 'core'
			}).then((res) => {
				if (res.code == 1 && res.data) {
					app.globalData.popularize_code = res.data.userInfos.popularize_code;
					app.globalData.userInfo = res.data.userInfos;
					app.globalData.business = res.data.userInfos.business_status;
					app.globalData.service = res.data.service;
					that.setData({
						business: res.data.userInfos.business_status,
						service: res.data.service
					});
				}
			});
			this.setData({
				loca_address: app.globalData.addressInfo
			});
		},
		onPullDownRefresh: function() {
			var page = 1;
			this.setData({
				pagenow: page,
				banner: [],
				dataList: []
			});
			this.getBanner();
			uni.stopPullDownRefresh();
		},
		methods: {
			onToCall(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//拨打电话
				uni.makePhoneCall({
					phoneNumber: "",
					success: function() {
						console.log('成功拨打电话');
					}
				});
			},

			handleChange: function(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				this.setData({
					currentIndex: e.detail.current,
					nowIndex: parseInt(e.detail.current)
				}); // console.log(e);
			},

			onSelects: function(e) {
				//标签选择
				this.setData({
					selects_goods: e.currentTarget.dataset.selects,
					pagenow: 1
				});
			},

			confirm_keyword: function(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				// 确认搜索
				uni.navigateTo({
					url: '/pages/search/index'
				});
			},

			onSwitchCity: function() {
				//切换城市
				uni.navigateTo({
					url: '/pages/index/address/city/index'
				});
			},

			onConfirmKeyword: function(e) {
				// 确认搜索
				uni.navigateTo({
					url: '/pages/search/index'
				});
			},

			onItemClick(e) {
				var url = e.currentTarget.dataset.url;
				var type = e.currentTarget.dataset.type;
				let name = e.currentTarget.dataset.name;
				if (name.indexOf('分类') >= 0) {
					uni.switchTab({
						url: url + '?type=' + type + '&name=' + name
					});
				} else {
					uni.navigateTo({
						url: url + '?type=' + type + '&name=' + name
					});
				}
			},

			onBannerClick(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				var data = this.banner[e.currentTarget.dataset.index]; //点击

				if (data.jump_type == 3) {
					//跳转到图片
					uni.navigateTo({
						url: '/pages/imgview/index?id=' + data.id
					});
				}

				if (data.jump_type == 4) {
					//跳转到内部
					uni.navigateTo({
						url: data.jump_link
					});
				}

				if (data.jump_type == 1) {
					// 商品跳转
					uni.navigateTo({
						url: '/pages/goodsDetail/index?id=' + data.goods_id
					});
				}

				if (data.jump_type == 2) {
					uni.setStorageSync('webview_url', data.jump_link); //外部跳转

					uni.navigateTo({
						url: '/pages/webview/index?httpUrl=' + data.jump_link
					});
				}
			},

			getMapAddress(obj) {
				//坐标转地址
				var _this = this;

				Map.reverseGeocoder({
					//位置坐标，默认获取当前位置，非必须参数
					location: obj || '',
					//
					success: function(res) {
						//成功后的回调
						app.globalData.addressInfo = res.result.address_component; //info

						_this.setData({
							loca_address: app.globalData.addressInfo,
							location: {
								lat: res.result.location.lat,
								lng: res.result.location.lng
							} //经纬度
						});
					},
					fail: function(error) {
						// console.error(error);
					}
				});
			},

			upOrCollect(e) {
				let detail = e.detail;
				let index = e.detail['index'];
				let type = e.detail['type']; //点赞收藏

				var json = {
					goods_id: detail['goods_id'],
					type: detail['type'] //类型 1收藏 2点赞
				};
				Api.upOrCollect(json).then((res) => {
					if (res.code == 1) {
						let upData = this.carList;

						if (parseInt(type) == 1) {
							upData[parseInt(index)]['goods_collect_count'] = res.data.count;
							upData[parseInt(index)]['is_collect'] = res.data.is_type;
						} else {
							upData[parseInt(index)]['goods_up_count'] = res.data.count;
							upData[parseInt(index)]['is_up'] = res.data.is_type;
						}

						this.setData({
							catList: upData
						});
					}
				});
			},

			getBanner() {
				// 轮播数据
				var json = {
					area: 'index'
				};
				let that = this;
				Api.banner(json).then((res) => {
					if (res.data.length >= 0) {
						this.setData({
							banner: res.data
						});
					}
					that.getLableList();
					this.getDataList();
				});
				Api.goodsMyCart().then((res) => {
					var data = res.data;
					var cat_sum = data.cat_sum;

					if (cat_sum == 0) {
						uni.removeTabBarBadge({
							index: app.globalData.catIndex
						});
					} else {
						uni.setTabBarBadge({
							index: app.globalData.catIndex,
							text: cat_sum + ''
						});
					}
				});
			},

			getLableList() {
				//获取首页导航
				let json = {
					type: 1
				};
				Api.indexLabel(json).then((res) => {
					if (res.code == 1) {
						this.setData({
							labelList: res.data
						});
					}
				});
				json = {
					type: 2
				};
				Api.indexLabel(json).then((res) => {
					if (res.code == 1) {
						this.setData({
							navItem: res.data
						});
					}
				});
			},
			getDataList() {
				//获取数据
				var datas = {
					type: 0,
					pagenow: this.pagenow,
					location: this.location
				};
				Api.indexList(datas).then((res) => {
					if (res.data.list.length > 0) {
						var data = this.dataList;
						var is_member = res.data.is_member;
						data = data.concat(res.data.list);
						var page = this.pagenow + 1;
						this.setData({
							dataList: data,
							pagenow: page,
							isMember: is_member
						});
					} else {
						this.setData({
							goodsEnd: 'end'
						});

						// wx.showToast({
						//   title: '暂无数据',
						//   icon: 'none',
						//   duration: 2000
						// })
					}
				});
			},

			selectLabel(e) {
				// console.log(e)
				let labelList = this.labelList;
				this.setData({
					selects: labelList[e.detail.index].id,
					dataList: [],
					pagenow: 1
				});
				this.getDataList();
			},

			get_height() {
				//获取内容宽度
				const query = uni.createSelectorQuery().in(this);

				const _this = this;

				query
					.select('#goods_nav')
					.boundingClientRect(function(res) {
						_this.setData({
							goodsNavH: res.height - 13
						});
					})
					.exec();
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			const app = getApp();
			// console.log(app.globalData.popularize_code);
			var rand = Math.random() * 100;
			return {
				title: app.globalData.title + '：更多优惠的商品等您来选购哦！',
				path: '/pages/index/index?code=' + app.globalData.popularize_code,
				imageUrl: Config.imgUrl + '/imgs/share.png?rand=' + rand
			};
		},
		onShareTimeline: function() {
			const app = getApp();
			// console.log(app.globalData.popularize_code);
			var rand = Math.random() * 100;
			return {
				title: app.globalData.title + '：更多优惠的商品等您来选购哦！',
				path: '/pages/index/index?code=' + app.globalData.popularize_code,
				imageUrl: Config.imgUrl + '/imgs/share.png?rand=' + rand
			};
		}
	};
</script>
<style>
	@import './index.css';
</style>
